<template>

  <div class="container">
<!-- 返回 -->
    <el-button class="back-button" type="warning" :icon="ArrowLeft" @click="goBack">返回</el-button>
<!-- 左边图片栏 -->
    <div class="left-img">
      <div>
        <el-tabs class="left-img-border" 
	
		>
			<img
			    :src="img[0]"
			    style="width: 100%"
			/>
          <!-- <el-tab-pane label="User" v-for="item in img"> -->
<!-- 缩略图 -->
          <!--  <template #label>
              <div style="width: 120px; height: 120px;">
                <img
                    :src="getPath(item)"
                    style="width: 100%"
                />
              </div>
            </template> -->
<!-- 大图 -->
            <!-- <img
                :src="getPath(item)"
                style="width: 100%"
            />
          </el-tab-pane> -->
        </el-tabs>
      </div>
    </div>
<!-- 右侧商品详情 -->
    <div class="right-text">
<!-- 商品名称 -->
      <div class="goods-title">{{goodsData2.name}}</div>
<!-- 商品评分展示 -->
      <div class="goods-rating">
<!-- 星级显示 -->
        <el-rate v-model="averageRating" disabled show-score text-color="#ff9900" score-template="{value} 分" />
<!-- 综合分数和总评论数 -->
        <span style="margin-left: 10px;">（{{totalReviews}}条评论）</span>
      </div>
<!-- 商品详情 -->
      <div style="margin-bottom: 26px;">{{goodsData2.description}}</div>
      <div class="goods-card">
<!-- 价格 -->
        <div class="card-con">
          <span style="font-size: 1.2rem;font-weight: 600;color: #df0000;">价格:
            <span style="color: #ff9900; font-weight: 600;">¥{{Number(goodsData2.price)}}</span>
          </span>
        </div>
<!-- 销量 -->	
        <div class="card-con">累计销量：{{goodsData2.sales}}</div>
		
<!-- 颜色 -->
        <div class="card-con">可选颜色：
		<!-- <el-button v-for="(item, index) in goodsData2.colour" :key="index" @click="setColourIndexAndId(index,item.id)">
		{{item.name}}
		</el-button> -->
		
		    <el-radio-group
		      v-model="radio2"
		      text-color="#ff9900"
		      fill="#fff5e9"
		    >
		      <el-radio-button :value="item.name" v-for="(item, index) in goodsData2.colour" :key="index" @click="setColourIndexAndId(index,item.id)">
			  {{item.name}}
			  </el-radio-button>
		      
		    </el-radio-group>
		  
		</div>
		
<!-- 大小	 -->	
		<div class="card-con" v-if="colourindex!=NULL">可选大小：
		<!-- <el-button v-for="item in goodsData2.colour[colourindex].size" @click="setSizeId(item.id)">
		{{item.name}}
		</el-button> -->
		<el-radio-group
		  v-model="radio"
		  text-color="#ff9900"
		  fill="#fff5e9"
		>
		  <el-radio-button :value="item.name" v-for="item in goodsData2.colour[colourindex].size" @click="setSizeId(item.id,item.stock,item.stockid)">
		  {{item.name}}
		  </el-radio-button>
		  
		</el-radio-group>
		</div>
		
		
      </div>
<!-- 收货地址 -->
      <!-- <div>
        <el-form-item class="address-sel" label="选择收货地址:">
          <el-select  v-model="form.region" placeholder="please select " @change="getstoreId">
            <el-option label="永辉超市" :value="2" />
            <el-option label="京东便利店" :value="1" />
          </el-select>
        </el-form-item>
      </div> -->
<!-- 购买数量 -->
      <div style="margin-top: 50px;">购买数量：
        <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
      </div>
      <div class="btns3">
<!-- 加入购物车 -->
        <el-button :icon="Check" type="success" style="font-weight: 500;font-size: 1.4rem; width: 255px;" size="large"  @click="addtocart(goodsData2.id,goodsData2.price)">加入购物车</el-button>
        <!-- <el-button v-if="alreadyCollect" :icon="Star" type="warning" @click="setCollect()">收藏该商品</el-button>
        <el-button v-else :icon="Star" type="warning"  disabled>已收藏</el-button> -->
<!-- 直接下单 -->
		<el-button  
		    :icon="ShoppingCart" 
			style="font-weight: 500;font-size: 1.4rem; width: 255px;" 
			type="danger" 
			size="large" 
			@click="addOrder(goodsData2.id,goodsData2.price)">
			立即下单
		</el-button>
      </div>
 <!-- 订单/购物车弹窗 -->     
    </div>
    <el-dialog
        v-model="dialog.show"
        :title="dialog.title"
        width="450px"
        :close-on-click-modal="false">
      <Add
          v-if="dialog.show"
          @getDataById="getDataById()"
          v-model:show="dialog.show"
          :id="dialog.id"
		  :colourid="dialog.colourid"
		  :sizeid="dialog.sizeid"
		  :stockid="dialog.stockid"
		  :stock="dialog.stock"
          :num="dialog.num"
          :userId="dialog.userId"
          :price="dialog.price"
          :cart="dialog.cart"/>
    </el-dialog>
<!-- 商品评价区 -->	
  <!-- </div>
  <div class="review-section">
    <el-divider content-position="left">商品评价</el-divider> -->

    <!-- 评论表单 -->
    <!-- <div v-if="showReviewForm" class="review-form">
      <h3>发表评价</h3>
      <el-form :model="reviewForm">
        <el-form-item label="评分">
          <el-rate v-model="reviewForm.rating" />
        </el-form-item>
        <el-form-item label="评论内容">
          <el-input
              type="textarea"
              v-model="reviewForm.comment"
              :rows="4"
              placeholder="请写下您的使用体验..."

          />
        </el-form-item>
        <el-form-item label="上传图片">
          <el-upload
              action="/api/upload"
              list-type="picture-card"
              :on-success="handleUploadSuccess"
              :limit="3"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-button type="warning" @click="submitReview">提交评价</el-button>
      </el-form>
    </div> -->

    <!-- 评论列表 -->
    <!-- <div class="review-list">
      <div v-if="reviews.length === 0" class="no-reviews">
        暂无评价，成为第一个评价的人吧！
      </div>

      <div v-for="review in reviews" :key="review.id" class="review-item">
        <div class="review-header">
          <el-avatar :size="40">{{ review.username ? review.username.charAt(0) : 'U' }}</el-avatar>
          <div class="review-info">
            <span class="username">{{ review.username || '匿名用户' }}</span>
            <el-rate v-model="review.rating" disabled />
            <span class="time">{{ formatTime(review.createTime) }}</span>
          </div>
        </div>
        <p class="comment">{{ review.comment }}</p>
        <div v-if="review.imgUrl" class="review-images">
          <img
              v-for="(img, index) in review.imgUrl.split(',')"
              :key="index"
              :src="getPath(img)"
              @click="previewImage(getPath(img))"
          />
        </div>
      </div> -->

      <!-- <el-pagination
          v-if="totalReviews > reviewPageSize"
          v-model:current-page="reviewPage"
          :page-size="reviewPageSize"
          :total="totalReviews"
          layout="prev, pager, next"
          @current-change="getReviews"
      />
    </div> -->
  </div>

  <!-- 图片预览弹窗 -->
  <!-- <el-dialog v-model="previewVisible" title="图片预览">
    <img :src="previewImageUrl" style="width: 100%">
  </el-dialog> -->
</template>

<script setup>
import { getCookieForObject,setCookiesFromObject} from '@/util';
import { onMounted,ref ,reactive, onUpdated } from 'vue'
import {Star,Check, ArrowLeft} from '@element-plus/icons-vue'
import { Search,ShoppingCart } from '@element-plus/icons-vue'
import router from '@/router';
import { ElMessage, ElMessageBox } from 'element-plus';
import Add from './add-order'
import { useRoute } from 'vue-router';
import {get,post} from '@/plugins/axios'
import { getPath } from '@/util';
//颜色序列号
const colourindex=ref()
//单选框关联数据
const radio = ref()
const radio2 = ref()
//同步选择后的颜色数据
function setColourIndexAndId(index,id){
	colourindex.value=index;
	dialog.colourid=id;
}
//同步选择后的尺寸数据
function setSizeId(id,stock,stockid){
	dialog.sizeid=id;
	dialog.stock=stock;
	dialog.stockid=stockid;
}

// const alreadyCollect=ref(true)
//对话框数据
const dialog = reactive({
  show: false,//是否显示对话框
  title: '',
  id: null,//商品ID
  colourid:'',//颜色ID
  sizeid:'',//尺寸ID
  stockid:'',//库存ID
  stock:'',//库存数量
  num: '',//购买数量
  //storeId: null,
  userId: null,//用户ID
  price:null,//单价
  cart:0//是否是购物车（购物车1，订单0）
})

const goodsData =[]
//商品数据
const goodsData2 =ref({
  id: 1011,
  name: "经典款帆布休闲鞋",
  category: "帆布鞋",
  brand: "匡威",
  price: "369.00",
  sales:"45",
  description: "经典款帆布鞋，采用优质帆布面料，轻便透气，硫化橡胶大底耐磨防滑。经典黑白配色百搭时尚，适合日常出街、学生通勤等多种场景。",
  imagePathList: [
    "/images/1.jpg",  // 主图
    "/images/2.jpg",  // 细节图1（鞋头）
    "/images/3.jpg",  // 细节图2（鞋底）
    "/images/4.jpg"  // 细节图3（侧面）

  ],
  colour:[
	  {id:"0001",name:'棕色',size:[{id:"0001",name:"38",stock:"999",stockid:'1'},{id:"0002",name:"39",stock:"999",stockid:'2'}]},
	  {id:"0002",name:'黑色',size:[{id:"0001",name:"38",stock:"999",stockid:'3'},{id:"0004",name:"37",stock:"999",stockid:'4'}]},
	  {id:"0001",name:'白色',size:[{id:"0001",name:"38",stock:"999",stockid:'5'},{id:"0003",name:"40",stock:"999",stockid:'6'}]}
  ],
  
  // 其他属性
  suitableId: 2,  // 适用人群（关联现有分类逻辑）
  salesCount: 1286,  // 销量
})
//商品图片地址
const img=ref([ "/images/1.jpg",  // 主图
    "/images/2.jpg",  // 细节图1（鞋头）
    "/images/3.jpg",  // 细节图2（鞋底）
    "/images/4.jpg"  // 细节图3（侧面）
])
//路由相关
const route = useRoute();
//用户ID
const userId=ref(1)
// 表单数据（收货地址相关）
const form=reactive({
  region:''
})
// 购买数量（默认1）
const num = ref(1)
// 数量变化事件
const handleChange = (value) => {
  console.log(value)
}
// 获取门店ID
// const getstoreId = (value) => {
//   dialog.storeId = value
// }



// // 评论相关变量
// const showReviewForm = ref(false);  // 是否显示评论表单
// const reviewForm = reactive({  // 评论表单数据
//   rating: 5,  // 评分（默认5星）
//   comment: '',  // 评论内容
//   images: []  // 评论图片
// });
// const reviews = ref([]);  // 评论列表
// const reviewPage = ref(1);  // 评论当前页码
// const reviewPageSize = ref(5);  // 评论每页数量
// const totalReviews = ref(0);  // 评论总数量
// const averageRating = ref(0);  // 平均评分

// // 图片预览相关
// const previewVisible = ref(false);  // 图片预览弹窗显示状态
// const previewImageUrl = ref('');  // 预览图片URL

// 组件挂载时执行
onMounted(() => {
  getDataById();  // 获取商品详情
  // 如果路由带orderId参数，检查是否可以评价
  if (route.query.orderId) {
    //checkCanReview(route.query.orderId);
  }
});

// 返回上一页
const goBack = () => {
  router.go(-1);  // 路由返回
};

// 初始化（获取用户信息）
init();

// 立即下单
function addOrder(id, price) {
  //getstoreId();  // 获取门店ID
  let flag = checkLogin();  // 检查登录状态
  // 如果已登录且库存充足
  if (flag && Number(dialog.stock) > 0) {
    dialog.cart = 0;  // 标识为订单
    dialog.title = '添加订单';  // 弹窗标题
    dialog.id = id;  // 商品ID
    dialog.num = num.value;  // 数量
    //dialog.storeId = storeId;  // 门店ID
    dialog.userId = userId.value;  // 用户ID
    dialog.price = price;  // 价格
    dialog.show = true;  // 显示弹窗
  } else {
    // 库存不足提示
    if (Number(goodsData2.value.store) <= 0) {
      ElMessage({
        type: 'warning',
        message: '商品库存不够啦，请耐心等待商家补货'
      });
    }
	else{
		// 未选择型号
		ElMessageBox.confirm('您尚未选择颜色尺寸，请先选择。', '提示', {
		  confirmButtonText: '选择',
		  cancelButtonText: '取消',
		  type: 'warning',
		}).then(() => {
		   dialog.show = false;  // 关闭弹窗;
		});
	}
  }
}

// // 检查是否可以评价
// function checkCanReview(orderId) {
//   get("/goodsReview/canReview", { orderId }, content => {
//     showReviewForm.value = content;  // 控制评论表单显示
//   });
// }

// // 上传图片成功回调
// function handleUploadSuccess(response, file) {
//   if (response && response.data) {
//     reviewForm.images.push(response.data);  // 保存图片URL
//   }
// }

// // 提交评价
// function submitReview() {
//   // 验证评论内容
//   if (!reviewForm.comment) {
//     ElMessage.warning('请填写评论内容');
//     return;
//   }

//   // 提交评价请求
//   post("/goodsReview/add", {
//     'orderId': route.query.orderId,
//     'productId': goodsData2.value.id,
//     'userId': userId.value,
//     'rating': reviewForm.rating,
//     'comment': reviewForm.comment,
//     'imgUrl': reviewForm.images.join(',')  // 图片URL拼接为字符串
//   }, () => {
//     ElMessage.success('评价成功！');  // 成功提示
//     showReviewForm.value = false;  // 隐藏评论表单
//     getReviews();  // 刷新评论列表
//     getAverageRating();  // 刷新平均评分
//   });
// }

// // 获取评论列表
// function getReviews() {
//   get("/goodsReview/page", {
//     'productId': goodsData2.value.id,
//     'page': reviewPage.value,
//     'size': reviewPageSize.value
//   }, content => {
//     reviews.value = content.records || [];  // 评论数据
//     totalReviews.value = content.total || 0;  // 总评论数
//   });
// }

// 获取平均评分
function getAverageRating() {
  get("/goodsReview/averageRating", {
    'productId': goodsData2.value.id
  }, content => {
    // 保留一位小数
    averageRating.value = content ? parseFloat(content.toFixed(1)) : 0;
  });
}

// // 格式化时间
// function formatTime(time) {
//   if (!time) return '';
//   const date = new Date(time);
//   // 格式化年月日时分
//   return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
// }

// // 图片预览
// function previewImage(url) {
//   previewImageUrl.value = url;  // 设置预览图片URL
//   previewVisible.value = true;  // 显示预览弹窗
// }

// 加入购物车
function addtocart(id, price) {
  let flag = checkLogin();  // 检查登录状态
  if (flag && dialog.stockid) {
    dialog.cart = 1;  // 标识为购物车
    dialog.title = '添加到购物车';  // 弹窗标题
    dialog.id = id;  // 商品ID
    dialog.num = num.value;  // 数量
    //dialog.address = address;  // 地址
    dialog.userId = userId.value;  // 用户ID
    dialog.price = price;  // 价格
    dialog.show = true;  // 显示弹窗
  }else{
	  // 未选择型号
	  ElMessageBox.confirm('您尚未选择颜色尺寸，请先选择。', '提示', {
	    confirmButtonText: '选择',
	    cancelButtonText: '取消',
	    type: 'warning',
	  }).then(() => {
	     dialog.show = false;  // 关闭弹窗;
	  });
  }
}

// 获取商品详情
function getDataById() {
  get("/goods/getById", { 'id': route.query.goodsId }, content => {
    goodsData.push(content);  // 保存商品数据
    // 处理图片路径
    for (const key in content.imagePathList) {
      img.value.push(content.imagePathList[key]);
    }
    goodsData2.value = content;  // 更新商品数据

    //getReviews();  // 获取评论
    getAverageRating();  // 获取平均评分
  });
}

// 初始化：从Cookie获取用户信息
function init() {
  const userinfo = getCookieForObject('user');
  if (userinfo) {
    userId.value = userinfo.id;  // 设置用户ID
  }
}

// 检查登录状态
function checkLogin() {
  if (userId.value === undefined) {
    // 未登录：提示登录
    ElMessageBox.confirm('您尚未登录，请先登录。', '提示', {
      confirmButtonText: '登录',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      router.push({ name: 'LoginRegister' });  // 跳转到登录页
    });
    return false;  // 未登录
  } else {
    return true;  // 已登录
  }
}

// function setCollect() {
//   let flag = checkLogin()
//   if (flag) {
//     post("/collect/add",{goodsId:goodsData2.value.id,userId:userId.value},()=>{
//       ElMessage({
//         type:'success',
//         message: '收藏成功',
//       })
//       getAlreadyCollect()
//     })
//   }
// }

// function getAlreadyCollect(){
//   post("/collect/search",{goodsId:goodsData2.value.id,userId:userId.value},content=>{
//     alreadyCollect.value=content
//   })
// }
</script>

<style lang="scss" scoped>
.back-button {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;

  .el-button {
    display: flex;
    align-items: center;
	justify-content: center;
    gap: 5px;
    font-weight: 500;
  }
}
.container{
  display: flex;
  min-height: 100vh;
  .left-img{
    display: flex;
    margin: 30px auto;
	width: 25%;
	margin-top: 65px;
    .left-img-border{
      border: 2px solid #f8c27f;
      padding: 16px 16px 0 16px;
      width: 430px;
    }
    .el-tabs--top{
      flex-direction: column;
    }
    .el-tabs{
      --el-tabs-header-height:100px;
      --el-font-size-base:26px;
    }
    .el-tabs__nav-prev,.el-tabs__nav-next{
      left: -6px;
      font-size: 25px;
      line-height: 106px;
    }
  }
  .right-text{
    display: flex;
    width: 55%;
	margin-top: 45px;
	padding-right: 150px;
    flex-direction: column;
    .goods-title{
      margin: 28px 0 10px 0;
      font-size: 28px;
      font-weight: bold;
    }
    .goods-rating {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      font-size: 16px;
      color: #676666;
    }
    .goods-card{
      width: 700px;
      height: 180px;
      background-color: #fff5e9;
      border-radius: 6px;

      .card-con{
        margin: 14px 26px;
        font-size: 16px;
      }
    }
    .address-sel{
      width: 300px;
      margin: 26px 0 26px 0;
    }
    .btns3{
      margin: 26px 0 26px 0;
    }
  }
}
::v-deep .el-tabs__nav-next{
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 100px;
}
::v-deep .el-tabs__nav-prev{
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 100px;
}
.review-section {
  margin-top: 50px;
  padding: 20px;
  border-top: 1px solid #eee;
}

.review-form {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
background-color: #fff5e9;
  h3 {
    margin-bottom: 20px;
    font-size: 18px;
    color: #333;
  }
}

.review-item {
  border-bottom: 1px solid #fff5e9;
  padding: 20px 0;
}

.review-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.review-info {
  margin-left: 15px;
  flex: 1;
  display: flex;
  align-items: center;
}

.username {
  font-weight: bold;
  margin-right: 15px;
}

.time {
  color: #999;
  font-size: 0.9rem;
  margin-left: auto;
}

.comment {
  margin: 10px 0;
  line-height: 1.6;
  font-size: 15px;
  color: #333;
}

.review-images img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin-right: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.3s;

  &:hover {
    transform: scale(1.05);
  }
}

.no-reviews {
  text-align: center;
  padding: 40px 0;
  color: #7e4f4f;
  font-weight: bold;
  font-size: 16px ;
}

.el-pagination {
  margin-top: 20px;
  justify-content: center;
}
.back-button {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
}
// 穿透修改单选按钮选中样式
::v-deep .el-radio-button__inner {
  // 未选中状态样式
  background-color: #fff5e9;
  color: #333;
  border-color: #f8c27f;
}

::v-deep .el-radio-button.is-active .el-radio-button__inner {
  // 选中状态样式（橙色背景+白色文字）
  background-color: #efbc71 !important;
  color: #fff !important;
  border-color: #efbc71 !important;
}

</style>